import React from 'react'
import { Link, IndexLink } from 'react-router'

import {mixin} from "core-decorators";
import { shouldComponentUpdate } from 'react-immutable-render-mixin';

import { action_logout } from '../actions/login'
import { right_header_change } from '../actions/right'
import {Topbar,CollapsibleNav,Nav,NavItem} from "amazeui-react";

@mixin({shouldComponentUpdate})
export default class Header extends React.Component {
    handleClick(e) {
        e.preventDefault();
        this.props.dispatch(action_logout());
        this.changeHeaderRight("/");
    }
    changeHeaderRight(url){
        this.props.dispatch(dispatch => {dispatch(right_header_change(url))});
        this.props.history.push(url);
    }
    render() {
        let { isLogin, user,headerRight } = this.props;
        return (
        <Topbar brand="Think-React" toggleNavKey="nav">
            <CollapsibleNav eventKey="nav">
                <Nav topbar>
                    <NavItem active={headerRight=='index'} ><Link href="javascript:;" onClick={e=>this.changeHeaderRight("/")}>首页</Link></NavItem>
                    <NavItem active={headerRight=='info'} href="javascript:;">开始使用</NavItem>
                    {isLogin
                        ?<NavItem ><Link href="javascript:;" onClick={ e => this.handleClick(e)}>注销</Link></NavItem>
                        :<NavItem active={headerRight=='login'} ><Link href="javascript:;" onClick={e=>this.changeHeaderRight("/login")}>登录</Link></NavItem>
                    }
                </Nav>
            </CollapsibleNav>
        </Topbar>
        );
    }
}